<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <!-- 基本信息 -->
      <div class="resume-edit-basic">
        <van-field required v-model="postData.personName" size="large" label="姓名" placeholder="请填写" style="font-size: 16px" />

        <van-field size="large" required label="性别" style="font-size: 16px">
          <template #input>
            <van-radio-group v-model="postData.sex" direction="horizontal">
              <van-radio name="男" checked-color="#05A6F0" icon-size="16px">先生</van-radio>
              <van-radio name="女" checked-color="#05A6F0" icon-size="16px">女士</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field required readonly clickable size="large" :value="postData.birthDate" label="出生日期" placeholder="请选择" style="font-size: 16px" @click="showPicker_birth = true" />
        <van-popup v-model="showPicker_birth" round position="bottom">
          <van-datetime-picker v-model="picker_birth_current" :min-date="picker_birth_minDate" :max-date="picker_birth_maxDate" type="date" title="出生日期" @confirm="onPickerBirthSubmit" @cancel="showPicker_birth = false" />
        </van-popup>

        <van-field required readonly clickable size="large" :value="postData.level_EduValue" label="学历" placeholder="请选择" style="font-size: 16px" @click="showPicker_edu = true" />
        <van-popup v-model="showPicker_edu" round position="bottom">
          <van-picker title="最高学历" show-toolbar :columns="picker_edu_data" :default-index="picker_edu_defaultIndex" value-key="codeValue" @confirm="onPickerEduSubmit" @cancel="showPicker_edu = false" />
        </van-popup>

        <van-field required readonly clickable size="large" :value="postData.work_yearsValue" label="经验" placeholder="请选择" style="font-size: 16px" @click="showPicker_workyears = true" />
        <van-popup v-model="showPicker_workyears" round position="bottom">
          <van-picker title="工作经验" show-toolbar :columns="picker_workyears_data" :default-index="picker_workyears_defaultIndex" value-key="codeValue" @confirm="onPickerWorkyearsSubmit" @cancel="showPicker_workyears = false" />
        </van-popup>

        <van-field required v-model="postData.tel_Home" type="tel" maxlength="11" size="large" label="手机" placeholder="请填写" style="font-size: 16px" />

        <div class="more-btn" @click="show_more = true" v-show="!show_more">点击填写更多信息</div>
        <div class="more-select" v-show="show_more">
          <van-field readonly clickable size="large" :value="postData.nation_IDValue" label="民族" placeholder="请选择" style="font-size: 16px" @click="showPicker_mz = true" />
          <van-popup v-model="showPicker_mz" round position="bottom">
            <van-picker title="民族" show-toolbar :columns="picker_mz_data" :default-index="picker_mz_defaultIndex" value-key="codeValue" @confirm="onPickerMZSubmit" @cancel="showPicker_mz = false" />
          </van-popup>

          <van-field readonly clickable size="large" :value="postData.politicsValue" label="政治面貌" placeholder="请选择" style="font-size: 16px" @click="showPicker_zzmm = true" />
          <van-popup v-model="showPicker_zzmm" round position="bottom">
            <van-picker title="政治面貌" show-toolbar :columns="picker_zzmm_data" :default-index="picker_zzmm_defaultIndex" value-key="codeValue" @confirm="onPickerZZMMSubmit" @cancel="showPicker_zzmm = false" />
          </van-popup>

          <van-field readonly clickable size="large" :value="postData.marital_Status" label="婚姻状况" placeholder="请选择" style="font-size: 16px" @click="showPicker_marry = true" />
          <van-popup v-model="showPicker_marry" round position="bottom">
            <van-picker title="婚姻状况" show-toolbar :columns="picker_marry_data" :default-index="picker_marry_defaultIndex" value-key="itemVal" @confirm="onPickerMarrySubmit" @cancel="showPicker_marry = false" />
          </van-popup>

          <van-field readonly clickable size="large" :value="postData.reg_AddrValue" label="户籍" placeholder="请选择" style="font-size: 16px" @click="showPicker_hk = true" />
          <van-popup v-model="showPicker_hk" round position="bottom">
            <van-picker title="户籍" show-toolbar :columns="picker_hk_data" :default-index="picker_hk_defaultIndex" value-key="codeValue" @confirm="onPickerHKSubmit" @cancel="showPicker_hk = false" />
          </van-popup>

          <van-field readonly clickable size="large" :value="postData.dwell_AddrValue" label="居住地" placeholder="请选择" style="font-size: 16px" @click="showPicker_area = true" />
          <van-popup v-model="showPicker_area" round position="bottom">
            <van-cascader title="居住地" :options="select_area_data" active-color="#05A6F0" :value="picker_area_defaultIndex" @finish="onPickerAreaSubmit" @close="showPicker_area = false" />
          </van-popup>

          <van-field v-model="postData.graduate_School" size="large" label="毕业院校" maxlength="50" placeholder="请填写" style="font-size: 16px" />

          <van-field readonly clickable size="large" :value="postData.specialtyValue" label="所学专业" placeholder="请选择" style="font-size: 16px" @click="showPicker_zy = true" />
          <van-popup v-model="showPicker_zy" round position="bottom">
            <van-cascader title="所学专业" :options="select_zy_data" active-color="#05A6F0" :value="picker_zy_defaultIndex" @finish="onPickerZYSubmit" @close="showPicker_zy = false" />
          </van-popup>

          <van-field readonly clickable size="large" :value="postData.graduate_Time" label="毕业时间" placeholder="请选择" style="font-size: 16px" @click="showPicker_graduateDate = true" />
          <van-popup v-model="showPicker_graduateDate" round position="bottom">
            <van-datetime-picker v-model="picker_graduateDate_current" :min-date="picker_graduateDate_minDate" :max-date="picker_graduateDate_maxDate" type="date" title="毕业时间" @confirm="onPickerGraduateDateSubmit" @cancel="showPicker_graduateDate = false" />
          </van-popup>

        </div>

        <div style="margin: 16px">
          <van-button type="primary" block color="#05A6F0" round style="font-size: 18px" text="提交" :loading="loading_submit" @click="onSubmit">
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import {Field,RadioGroup,Radio,Picker,Popup,Button,DatetimePicker, Toast, Cascader} from "vant";
import { GetMarryStatus, GetAreaProvice, GetAreaCitys, getDoubleArrayMix } from '@/util/selectData'
import { mixin_validate, mixin_person_resumeSumbitBack } from '@/mixin/mixins'
import { getMobileNum } from '@/util/session';
import myJmessage from '@/util/myJmessage';
export default {
  name: 'ResumeBaseInfo',
  components: {
    NavBar,
    [Field.name]: Field,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [DatetimePicker.name]: DatetimePicker,
    [Cascader.name]: Cascader,
  },
  props: ['title', 'data'],
  mixins: [mixin_validate, mixin_person_resumeSumbitBack],
	created(){
		this.$api.get('/Resume/GetBasicInfo').then(res=>{
			if(res.success){
				let data = res.response;
				this.postData = data;
				if(data.fmBirthDay != '')
					this.postData.birthDate = data.fmBirthDay;
				if(data.fmGraduateTime != '')
					this.postData.graduate_Time = data.fmGraduateTime;
				//电话默认值
				if(res.tel_Home==''){this.postData.tel_Home = getMobileNum()}
			}
		})
	},
  // 定义属性
  data() {
    return {
      postData: {
        personName: '',
        sex: '',
				birthDate:null,
        level_Edu: '',
				level_EduValue:'',
        work_years: '',
        work_yearsValue: '',
        tel_Home: '',
        dwell_Addr: '',//居住地
        dwell_AddrValue: '',
        reg_Addr: '',//户籍
        reg_AddrValue: '',
        nation_ID: '',
        nation_IDValue: '',
        politics: '',
        politicsValue: '',
        specialty: '',
        specialtyValue: '',
        marital_Status: '',
				graduate_School:'',
				graduate_Time:null
      },
			//格式化属性
			fmBirthDay: '',
			fmGraduateTime:'',

      showPicker_birth: false,
      picker_birth_current: new Date(),
      picker_birth_minDate: new Date(new Date().getFullYear() - 70, 0, 1),
      picker_birth_maxDate: new Date(new Date().getFullYear() - 16, 0, 1),

      showPicker_edu: false,
      picker_edu_data: this.$bd.edu,
      picker_edu_defaultIndex: 0,

      showPicker_workyears: false,
      picker_workyears_data: this.$bd.workYears,
      picker_workyears_defaultIndex: 0,

      showPicker_mz: false,
      picker_mz_data: this.$bd.folk,
      picker_mz_defaultIndex: 0,

      showPicker_zzmm: false,
      picker_zzmm_data: this.$bd.political,
      picker_zzmm_defaultIndex: 0,

      showPicker_marry: false,
      picker_marry_data: GetMarryStatus(),
      picker_marry_defaultIndex: 0,

      showPicker_hk: false,
      picker_hk_data: this.$bd.register,
      picker_hk_defaultIndex: 0,

      showPicker_area: false,
      picker_area_defaultIndex: '',

      showPicker_zy: false,
      picker_zy_defaultIndex: '',

      showPicker_graduateDate: false,
      picker_graduateDate_current: new Date(),
      picker_graduateDate_minDate: new Date(new Date().getFullYear() - 50, 0, 1),
      picker_graduateDate_maxDate: new Date(new Date().getFullYear() + 1, 0, 1),

      show_more: false,
      loading_submit: false,
    }
  },
  computed: {
    select_area_data() {
      let p = GetAreaProvice();
      let c = GetAreaCitys();
      let array = new Array();
      p.forEach(item_p => {
        let item_child = [];
        let item = {
          text: item_p.itemVal,
          value: item_p.itemID,
          children: item_child
        }
        let c_filter = c.filter(item_c => {
          return item_c.itemID.substring(0, 2) === item_p.itemID
        })
        c_filter.forEach(item_c_filter => {
          item_child.push({
            text: item_c_filter.itemVal,
            value: item_c_filter.itemID
          })
        })
        item.children = item_child;
        array.push(item);
      });
      return array;
    },
    select_zy_data() {
      return getDoubleArrayMix(this.$bd.specialtyGrade1, this.$bd.specialtyGrade2);
    }
  },
  // 方法集合
  methods: {
    //生日
    onPickerBirthSubmit(value) {
      this.showPicker_birth = false;
      this.postData.birthDate = this.$dayjs(value).format('YYYY-MM-DD');
    },
    //学历
    onPickerEduSubmit(item) {
      this.showPicker_edu = false;
      this.postData.level_Edu = item.code;
			this.postData.level_EduValue = item.codeValue;
    },
    //经验
    onPickerWorkyearsSubmit(item) {
      this.showPicker_workyears = false;
      this.postData.work_yearsValue = item.codeValue;
      this.postData.work_years = item.code;
    },
    //名族
    onPickerMZSubmit(item) {
      this.showPicker_mz = false;
      this.postData.nation_IDValue = item.codeValue;
      this.postData.nation_ID = item.code;
    },
    //政治面貌
    onPickerZZMMSubmit(item) {
      this.showPicker_zzmm = false;
      this.postData.politicsValue = item.codeValue;
      this.postData.politics = item.code;
    },
    //婚姻状况
    onPickerMarrySubmit(item) {
      this.showPicker_marry = false;
      this.postData.marital_Status = item.itemID;
    },
    //户籍
    onPickerHKSubmit(item) {
      this.showPicker_hk = false;
      this.postData.reg_AddrValue = item.codeValue;
      this.postData.reg_Addr = item.code;
    },
    //居住地
    onPickerAreaSubmit({ value, selectedOptions }) {
      this.showPicker_area = false;
      this.postData.dwell_Addr = value;
      this.postData.dwell_AddrValue = selectedOptions[0].text + '->' + selectedOptions[1].text;
    },
    //专业
    onPickerZYSubmit({ value, selectedOptions }) {
      this.showPicker_zy = false;
      this.postData.specialty = value;
      this.postData.specialtyValue = selectedOptions[1].text;
    },
    //毕业时间
    onPickerGraduateDateSubmit(value) {
      this.showPicker_graduateDate = false;
      this.postData.graduate_Time =  this.$dayjs(value).format('YYYY-MM-DD');
    },
    onSubmit() {
      if (this.postData.personName === '') {
        Toast('请填写姓名');
        return;
      }
      if (!this.validate_phone.test(this.postData.tel_Home)) {
        Toast('手机格式不正确');
        return;
      }
      
			console.log(this.postData);
			this.loading_submit = true;
			this.$api.post('/Resume/SaveBasicInfo',this.postData).then(res=>{
				this.loading_submit = false;
				if(res.success){
					Toast.success('保存成功');
					this.goBack();
					myJmessage.updateSelfInfo(this.postData.personName);
				}
				else{Toast.fail(res.msg)}
			})
      // PersonResumeSaveBaseInfo(this.postData).then(res => {
      //   // console.log(res)
      //   this.loading_submit = false;
      //   Toast(res.msg);
      //   if (res.result === 1) {
      //     this.goBack();
      //   }
      // })
    }
  },
}
</script>

<style scoped>
.resume-edit-basic .more-btn {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  font-size: 15px;
  color: #05A6F0;
}

.resume-edit-basic .more-select {
  margin-top: 10px;
}
</style>